<% extends 'public/base.html'%>
<% block content %>
    <link rel="stylesheet" href="<< url_for('static', filename='prism/prism.css') >>">
  <div class="content whisper-content leacots-content details-content layui-container">
    <div class="cont layui-row">
      <div class="whisper-list">
        <div class="item-box">
          <div class="review-version">
              <div class="form-box">
                <div class="article-cont">
                  <div class="title">
                    <h3><< blog.title >></h3>
                    <p class="cont-info">
                      <span class="data"><< blog.createTime.date() >></span>
                      <span class="types"><< blog.categoryInfo.name >></span>
                      <span class="volume"><i class="layui-icon-read layui-icon"></i> << blog.readingVolume >></span>
                    </p>
                  </div>
                    <div id="content"><< blog.content|safe >></div>
                  <div class="btn-box">
                    <a class="layui-btn layui-btn-primary <% if not last_href %>layui-btn-disabled<% endif %>" href="<< last_href >>" >上一篇</a>
                    <a class="layui-btn layui-btn-primary <% if not next_href %>layui-btn-disabled<% endif %>" href="<< next_href >>">下一篇</a>
                  </div>
                </div>
                <div class="form">
                    <form class="layui-form">
                        <div class="layui-form-item layui-form-text">
                          <div class="layui-input-block">
                            <textarea name="desc" placeholder="既然来了，就说几句" class="layui-textarea" id="details_textarea"></textarea>
                          </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                          <div class="layui-inline">
                              <label class="layui-form-label">邮箱</label>
                              <div class="layui-input-inline">
                                <input type="tel" name="email" lay-verify="required|email" autocomplete="off" class="layui-input" id="email">
                              </div>
                            </div>
                            <div class="layui-inline">
                              <label class="layui-form-label">昵称</label>
                              <div class="layui-input-inline">
                                <input type="text" name="nickname" lay-verify="required" autocomplete="off" class="layui-input" id="nickname">
                              </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-input-block" style="text-align: right;">
                            <button class="layui-btn definite"lay-submit lay-filter="details_submit" type="button">立即提交</button>
                          </div>
                        </div>
                    </form>
                </div>
             </div>
              <div class="volume">
                  全部留言 <span><< blog.replyList|length >></span>
                </div>
                <div class="list-cont" id="reply_list"></div>

          </div>
        </div>
      </div>
      <div id="details_page" style="text-align: center;"></div>
    </div>
  </div>
  <script type="text/html" id="laytplCont">
    <div class="cont">
      <div class="img">
        {{#  if(d.avatar){ }}
        <img src="{{d.avatar}}" alt="">
        {{#  } else { }}
        <img src="<< url_for('static', filename='img/header.png') >>" alt="">
        {{# } }}
      </div>
      <div class="text">
        <p class="tit"><span class="name">{{d.name}}</span><span class="data"><< now_date >></span></p>
        <p class="ct">{{d.cont}}</p>
      </div>
    </div>
  </script>
<script src="<< url_for('static', filename='prism/prism.js',t='1483944306685') >>" charset="utf-8" type="text/javascript"></script>
<% endblock %>
<% block script%>
      lp=laypage.render({
        elem: 'details_page'
        ,count: << blog.replyList|length >> //数据总数，从服务端得到
       ,jump: function(obj, first){
            $.ajax({
              url:"<< url_for('main.get_reply',Id=blog.id) >>",
              data:{page:obj.curr,limit:obj.limit},
              dataType:'json',
              success:function (res) {
                  if(res.status==0){
                    $('#reply_list').html('');
                    $.each(res.data,function(index,item){
                      var html_data='<div class="cont" data-id="'+item.id+'"><div class="img"><img src="<< url_for('static', filename='img/header.png') >>" alt=""></div><div class="text"><p class="tit"><span class="name">'+item.nickname+'</span><span class="data">'+item.createTime+'</span></p><div class="ct">'+item.content+'</div></div></div>';
                    $('#reply_list').append(html_data);
                    });
                    obj.count=res.count;
                    var count = $('.list-cont .cont').length;
                    $('.volume span').text(count);
                  }
                  else{
                    layer.alert(res.msg)
                  }
              }
          })
         }
      });
      //插入 code 标签函数
    //@param  content 为异步获取的内容
    //@param  container 为放置这些内容的容器
    function insertCodeElement(content, container){
        container = container || document;

        // 创建一个 div 来放置获取到的内容，这样就可以把 content 字符串内容转换成 dom
        // 方便我们对这个 dom 进行操作（只是创建 div，并没有插入到文档，他只存在于内存中）
        var parent = document.createElement('div');
        parent.innerHTML = content;

        // 找到 parent 中的所有 pre 标签，并遍历
        var $pres = $(parent).find('pre');
        $pres.each(function(index, el) {
            var $el = $(el),
                html = $el.html(),
                code = document.createElement('code'),
                elClass = $el.attr('class');
                if(elClass!=undefined){
                    if(elClass.indexOf('brush:')!=-1){
                         // 获取 pre 标签中，class 属性中包含的本段代码所有的编程语言
                        language = elClass.substring(6, elClass.indexOf(';'));
                        code.className = 'language-' + language;
                        code.innerHTML = html;
                        $el.html(code);
                    }
                }

        });

        $(container).html(parent.innerHTML);

        // 最后，调用 Prism 的方法来高亮代码
        Prism.highlightAll();
    }
      insertCodeElement($('#content').html(), '#content');
      menu.init();
      var reply_textarea=layedit.build('details_textarea');
      form.on('submit(details_submit)', function(data){
          menu.submit(data.field.email,data.field.nickname,data.elem,reply_textarea,"<< url_for('main.details',Id=blog.id) >>",function(){
            var count = $('.list-cont .cont').length;
            $('.volume span').text(parseInt(count)+1);
          });
          return false;
      });
<% endblock %>